<template>
  <div id="pies" style="width: 630px; height: 290px;"></div>
</template>
<script setup>
import { ref } from "vue";
import { onMounted } from "vue";
import * as echarts from 'echarts';
import userApi from "../../apis/user";
const DrawEcharts = (data) => {
  console.log("data是什么")
  console.log(data);
  var chartDom = document.getElementById('pies');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '系统人数分布',
      left: 'top', // 标题水平居中
      top: '15px' // 标题距离图表顶部的距离
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        title: '人数分布',
        name: '详情信息',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  };
  option && myChart.setOption(option);
}
const GetAllPeopleNumber = async () => {
  try {
    const res =await userApi.getAllPeopleNumber();
    console.log("获取所有商品的数据");
    console.log(res);
    DrawEcharts(res);
  } catch (error) {
    console.log(error);
  }
}
onMounted(async () => {
  await GetAllPeopleNumber();
});
</script>

<style scoped>
</style>
